<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/webjars/bootstrap/3.3.7/css/bootstrap.css">
    <script type="text/javascript" src="/webjars/jquery/3.4.1/jquery.js"></script>
    <script type="text/javascript" src="/webjars/bootstrap/3.3.7/js/bootstrap.js"></script>
    <script type="text/javascript" src="/webjars/vue/2.6.10/dist/vue.js"></script>
    <script src="/webjars/axios/0.19.0/dist/axios.js" type="text/javascript"></script>
</head>
<body>
<div id="vuebox">
  <div class="container" style="margin-top: 50px">
      <div class="row">
          <div class="col-md-6">
              <form class="form-inline" role="form" style="padding-left: 250px;">
                  <div class="form-group" style="padding-left: 20px;">
                      <label>请选择商品分类:</label>
                      <select class="form-control" v-model="categoryid">
                          <option value="0">全部</option>
                          <option v-for="item in categoryList.data" :value="item.id">{{item.name}}</option>
                      </select>
                  </div>
                  <div class="form-group"  style="padding-left: 20px;">
                      <button type="button" class="btn btn-primary" @click="selectEntry(1)">查询</button>
                  </div>

              </form>
          </div>
      </div>
      <br/>
      <table class="table table-striped">
          <thead>
          <tr>
              <th>商品编号</th>
              <th>商品名称</th>
              <th>商品分类</th>
              <th>产地</th>
              <th>生产日期</th>
              <th>单价(元)</th>
              <th>剩余数量</th>
              <th>购买</th>

          </tr>
          </thead>
          <tbody>
          <tr v-for="item in entries.data.list">
              <td>{{item.id}}</td>
              <td>{{item.name}}</td>
              <td>
                  <p v-if="item.sortid==1">文具</p>
                  <p v-if="item.sortid==2">小电器</p>
                  <p v-if="item.sortid==3">零食</p>
                  </td>
              <td>{{item.address}}</td>
              <td>{{item.createdate}}</td>
              <td>{{item.price}}</td>
              <td>{{item.remaining}}</td>
              <td>
                  <button class="btn btn-success" @click="goumai(item.id)">购买</button>

              </td>
          </tr>
          </tbody>
      </table>
      <br/>
      <div class="text-center">
          <ul class="pagination">
              <li v-show="entries.data.hasPreviousPage">
                  <a href="#" @click.stop="selectEntry(entries.data.prePage)">&laquo;</a>
              </li>
              <li v-for="i in entries.data.navigatepageNums" :class="{active:entries.data.pageNum==i}">
                  <a href="#" @click.stop="selectEntry(i)">{{i}}</a>
              </li>
              <li v-show="entries.data.hasNextPage">
                  <a href="#" @click.stop="selectEntry(entries.data.nextPage)">&raquo;</a>
              </li>
          </ul>
      </div>
  </div>

    <!--模态框-->
    <div class="modal" id="mymodal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" @click="hideModal()" type="button">&times;</button>
                    <div class="modal-title">
                        <p>添加图书</p>
                    </div>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form">
                        <input type="hidden" v-model="new_entry.id">
                        <div class="form-group">
                            <label for="title" class="col-sm-2 control-label">商品编号</label>
                            <div class="col-sm-10">
                                <input v-model="new_entry.id" id="title" type="text" class="form-control" placeholder="请输入图书名称">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="summary" class="col-sm-2 control-label">商品名称</label>
                            <div class="col-sm-10">
                                <input v-model="new_entry.name" id="summary" type="text" class="form-control" placeholder="请输入图书摘要"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="categoryId" class="col-sm-2 control-label">商品分类</label>
                            <div class="col-sm-10">
                                <select id="categoryId" class="form-control" v-model="new_entry.sortid">
                                    <option value="0">全部</option>
                                    <option v-for="item in categoryList.data" :value="item.id">{{item.name}}</option>
                                </select>
                            </div>
                        </div>


                        <div class="form-group">
                            <label for="uploaduser" class="col-sm-2 control-label">单价(元)</label>
                            <div class="col-sm-10">
                                <input v-model="new_entry.price" id="uploaduser" type="text" class="form-control" placeholder="请输入上传人">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="createdate" class="col-sm-2 control-label">剩余数量</label>
                            <div class="col-sm-10">
                                <input v-model="new_entry.remaining" id="createdate" type="text" class="form-control" placeholder="请输入上传时间">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="createdate" class="col-sm-2 control-label">购买数量</label>
                            <div class="col-sm-10">
                                <input v-model="maicount" @blur="mouse" id="count" type="text" class="form-control" placeholder="请输入上传时间">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="createdate" class="col-sm-2 control-label">总金额</label>
                            <div class="col-sm-10">
                                <input v-model="totalPrice"  id="totalPrice" type="text" class="form-control" placeholder="请输入上传时间">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-default" @click="hideModal()">关闭</button>
                    <button class="btn btn-primary" @click="saveBook">购买</button>
                </div>
            </div>
        </div>
    </div>


</div>
</body>
<script type="text/javascript">
    var params=new URLSearchParams();
    params.append('count',"6")
        var vm=new Vue({
            el:"#vuebox",
            data:{
                categoryList:{},
                categoryid:"0",
                entries:{},
                pageNum:"",
                new_entry:{
                    id:'',name:'',sortid:'',price:'',remaining:''
                },
                creaedate:"",
                maicount:"",
                upgoods:{},
                totalPrice:""
            },
            methods:{
                selectEntry:function (pageNum) {
                    axios.get("/seledetail",{params:{pageNum:pageNum,sortid:this.categoryid}}).then(res=>{
                        this.entries=res.data;
                        this.pageNum=pageNum;
                    })
                },
                goumai:function (id) {
                    axios.get("/seleById",{params:{id:id}}).then(res=>{
                        this.new_entry=res.data.data;
                        $("#mymodal").modal('show');
                    })

                },
                hideModal:function () {
                    $("#mymodal").modal('hide');
                },
                saveBook:function () {
                    if(isNaN(this.maicount)){
                        alert("购买数量必须为正数")
                        return;
                    }
                    if(this.maicount.length==0){
                        alert("购买数量不能为空")
                        return;
                    }
                    if(this.new_entry.remaining<this.maicount){
                        alert("没有那么多存货啦")
                        return;
                    }
                    axios.post("/up",this.new_entry,{params:{count:this.maicount}}).then(res=>{
                        this.upgoods=res.data;
                        if(this.upgoods.result=="SUCCESS"){
                            alert("购买成功!")
                            this.selectEntry(this.pageNum);
                        }else{
                            alert(this.upgoods.message)
                        }
                        $("#mymodal").modal('hide');
                    })
                },
                mouse:function () {
                    this.totalPrice=this.new_entry.price*this.maicount;
                }
            },
            mounted(){
                axios.get("/seleSort").then(res=>{
                    this.categoryList=res.data;
                })
               this.selectEntry(this.pageNum);
            }
    })
</script>
</html>